<template>
  <div class="x6-graph-wrap">
    <h1>Scroller</h1>
    <div class="x6-graph-tools">
      <a-button @click="onCenterClick">Center</a-button>
      <a-button @click="onCenterContentClick">Center Content</a-button>
      <a-button @click="onZoomOutClick">Zoom Out</a-button>
      <a-button @click="onZoomInClick">Zoom In</a-button>
      <a-button @click="onZoomToFitClick">Zoom To Fit</a-button>
      <a-button @click="onDownload">Download</a-button>
    </div>
    <div ref="minimap" style="position: absolute;right: 50%;top: 40px;margin-right: -720px;width: 300px;height: 200px;box-shadow: 0 0 10px 1px #e9e9e9"/>
    <div ref="container" class="x6-graph" />
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
import { Graph, NodeView, DataUri } from '@antv/x6'
import '../index.less'
import './index.less'

class SimpleNodeView extends NodeView {
  protected renderMarkup() {
    return this.renderJSONMarkup({
      tagName: 'rect',
      selector: 'body',
    })
  }

  // protected renderPorts() {
  //
  // }

  update() {
    super.update({
      body: {
        refWidth: '100%',
        refHeight: '100%',
        fill: '#31d0c6',
      },
    })
  }
}


export default defineComponent({
  name: "index",
  data(){
    const graph: any = undefined
    const scroller: any = undefined
    return{
      graph,
      scroller
    }
  },
  mounted() {
    this.init()
  },
  methods:{

    init(){
      const graph = new Graph({
        container: (this.$refs.container) as HTMLElement,
        width: 800,
        height: 500,
        resizing: true,
        background: {
          color: '#f5f5f5',
        },
        grid: {
          visible: true,
        },
        selecting: {
          enabled: true,
          rubberband: true,
          modifiers: 'shift',
        },
        scroller: {
          enabled: true,
          // width: 600,
          // height: 400,
          pageVisible: true,
          pageBreak: true,
          pannable: true,
          // modifiers: 'shift',
        },
        minimap: {
          enabled: true,
          container: (this.$refs.minimap) as HTMLElement,
          width: 300,
          height: 200,
          padding: 10,
          graphOptions: {
            async: true,
            getCellView(cell) {
              if (cell.isNode()) {
                return SimpleNodeView
              }
            },
            createCellView(cell) {
              if (cell.isEdge()) {
                return null
              }
            },
          },
        },
        mousewheel: {
          enabled: true,
          // fixed: false,
          modifiers: ['ctrl', 'meta'],
          minScale: 0.5,
          maxScale: 2,
        },
      })

      this.scroller = graph.scroller.widget

      const rect = graph.addNode({
        shape: 'rect',
        x: 300,
        y: 300,
        width: 90,
        height: 60,
        attrs: {
          rect: { fill: '#31D0C6', stroke: '#4B4A67', 'stroke-width': 2 },
          text: { text: 'rect', fill: 'white' },
        },
        ports: [{}],
      })

      rect.on('removed', () => {
        console.log('rect was removed')
      })

      const circle = graph.addNode({
        shape: 'circle',
        x: 400,
        y: 400,
        width: 40,
        height: 40,
        attrs: {
          circle: { fill: '#FE854F', 'stroke-width': 2, stroke: '#4B4A67' },
          text: { text: 'circle', fill: 'white' },
        },
      })

      graph.addEdge({
        source: rect,
        target: circle,
      })

      // graph.removeCell(rect)

      // graph.centerContent()
      // graph.resize(300, 200)
      // graph.zoomToFit()
      this.graph = graph
      graph.positionCell(rect, 'left', { padding: { left: 100 } })
    },

    onCenterClick(){
      this.graph.center()
      // this.graph.center({ padding: { left: 300 } })
      // this.graph.centerPoint(0, 0)
      // this.graph.positionPoint({ x: 0, y: 0 }, 100, 100)
    },

    onCenterContentClick(){
      this.graph.centerContent()
    },

    onZoomOutClick(){
      this.scroller.zoom(-0.2)
    },

    onZoomInClick(){
      this.scroller.zoom(0.2)
    },

    onZoomToFitClick(){
      this.scroller.zoomToFit()
    },

    onDownload(){
      this.graph.toPNG((datauri: string) => {
        DataUri.downloadDataUri(datauri, 'chart.png')
      })
    },
  }
})
</script>

<style scoped>

</style>
